﻿@{
    
    Layout = null;
}
<link rel="shortcut icon" href="favicon.ico">
<link rel="icon" type="image/gif" href="~/img/animated_favicon1.gif">
<link href="~/UILibs/easyui/themes/default/easyui.css" rel="stylesheet" />
<link href="~/UILibs/easyui/themes/icon.css" rel="stylesheet" />
<link href="~/Css/css.css" rel="stylesheet" />

<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<script src="~/Scripts/jquery.jqprint-0.3.js"></script>
<script src="~/UILibs/easyui/jquery.easyui.min.js"></script>

<script src="~/UILibs/easyui/locale/easyui-lang-zh_CN.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="~/Scripts/echarts.common.min.js"></script>
<script type="text/javascript">
    function searchData() {

        var start = $("#txtDate1").datebox('getValue');
        var end = $("#txtDate2").datebox('getValue');
        //alert(start); 
        if (start == null || end == null || end == "" || end == "") {

            alert("开始日期和结束时间不能为空");
            txtDate1.focus();
            return false;
        }
        else if (txtDate1.value > txtDate2.value) {

            alert("开始日期不能大于截至日期！");
            $("#txtDate1").datebox('setValue', "");//根据ID清空输入的时间
            $("#txtDate2").datebox('setValue', "");//根据ID清空

            txtDate1.focus();
            txtDate2.focus();
            return false;
        }
        else {
         
            $.post("/TotalSaleNumEchart/GetOrderAllTest?date1=" + $("#txtDate1").val() + '&date2=' + $('#txtDate2').val(),
            function (result) {
                var dataArray = [];
                var date = [];
                var SaleMoney = [];


                //请求成功时执行该函数内容，result即        为服务器返回的json对象   
                $.each(result, function (index, item) {

                    //挨个取出类别并填入类别数 
                    dataArray.push({
                        name: item.Date,
                        value: item.CountMoney        //注意这里 应该是  只能为 name value 的形式  ，别的不支持
                    });
                    date.push(item.Date);
                    SaleMoney.push(item.CountMoney);
                });


                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('main'));
                var option = {
                    title: {
                        text: '总营业额走势情况统计'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['使用次数']
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: date//['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        name: '销售额',
                        type: 'line',
                        data: SaleMoney// [12, 12,34, 23, 25, 26, 78]
                    }]
                };
                myChart.setOption(option);
            }
              )
        

            //$("#txtDate1").datebox('setValue', "");//根据ID清空输入的时间
            //$("#txtDate2").datebox('setValue', "");//根据ID清空
        }
    }
</script>

<body class="" style="width: 100%; height: 100%">

    <div id="tool" style="padding-left: 100px; margin-top: 20px">
        <p><span style="font-size: larger; color: brown; margin-top: initial;">请选择起始日期进行统计:</span></p>
        <input id="txtDate1" type="text" class="easyui-datebox" />
        ---
                <input id="txtDate2" type="text" class="easyui-datebox" onchange="searchData()" />
        &nbsp&nbsp&nbsp &nbsp&nbsp&nbsp &nbsp&nbsp&nbsp &nbsp&nbsp&nbsp 
                  <a class="easyui-linkbutton" iconcls="icon-search" onclick="searchData()">统计</a>
        <span style="font-size: larger; color: red">&nbsp&nbsp&nbsp  &nbsp&nbsp&nbsp &nbsp&nbsp&nbsp  </span>
    </div>

    <div style="width: 650px; height: 350px; margin-left: 80px; margin-top: 20px; float: left" id="main">
    </div>
    <script type="text/javascript">
        $.post('/TotalSaleNumEchart/GetOrderAllTest',
          function (result) {
              var dataArray = [];
              var date = [];
              var SaleMoney = [];

              //请求成功时执行该函数内容，result即     为服务器返回的json对象      
              $.each(result, function (index, item) {
                //  alert(result);
                  //挨个取出类别并填入类别数 
                  dataArray.push({
                      name: item.Date,
                      value: item.CountMoney        //注意这里 应该是  只能为 name value 的形式  ，别的不支持
                  });       
                  date.push(item.Date);
                  SaleMoney.push(item.CountMoney);
             
              });
              //alert(dataArray);
              //date = date.reverse();
              //SaleMoney = SaleMoney.reverse();
         
              // 基于准备好的dom，初始化echarts实例
              var myChart = echarts.init(document.getElementById('main'));
              var option = {
                  title: {
                      text: '总营业额走势情况统计'
                  },
                  tooltip: {
                      trigger: 'axis'
                  },
                  legend: {
                      data: ['使用次数']
                  },
                  toolbox: {
                      feature: {
                          saveAsImage: {}
                      }
                  },
                  grid: {
                      left: '3%',
                      right: '4%',
                      bottom: '3%',
                      containLabel: true
                  },
                  xAxis: {
                      type: 'category',
                      boundaryGap: false,
                      data: date//['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                  },
                  yAxis: {
                      type: 'value'
                  },
                  series: [{
                      name: '销售额',
                      type: 'line',
                      data: SaleMoney// [12, 12,34, 23, 25, 26, 78]
                  }]
              };
              myChart.setOption(option);
          }
              )   
           

    </script>
</body>

